<template>
  <div>
    <crudTable :option="option" 
               :data="data" 
               :page="page"
               :searchOptions="searchOptions"
               @onLoad="onLoad"
               @handleCurrentChange="handleCurrentChange"
               @handleSizeChange="handleSizeChange"
               @getQuery="getQuery">
      <template v-slot:cpagination>
        <!-- <div >cpagination插槽</div> -->
        <!-- 之后需要往分页左边放内容就写在上面的div里 -->
      </template>
    </crudTable>
  </div>
</template>

<script>
import crudTable from '@/components/CrudTable'
import { deliveryDetails,driverType } from '@/api/CollectDetail'
export default {
  components:{
    crudTable,//增删改查表
  },
  data(){
    return{
      query:{},
      //搜索框配置项
      searchOptions:{
        clearBtn:false,
        items:[
          {
            type:'times',
            key:['arrivedTimeStart','arrivedTimeEnd'],
            label:'到达时间'
          },
          {
            type:'select',
            key:'asOutsideDriver',
            label:'司机类型',
            dicData:[{
              desc:'馆外',
              val:'0'
            },{
              desc:'馆内',
              val:'1'
            }]
          },
          {
            type:'select',
            key:'fullName',
            label:'司机姓名',
            dicData:[]
          }
        ]
      },
      //表格数据
      data: [],
      //表格配置选项
      option:{
        isDefaultQuery:true,//是否有默认的查询条件
        isSearch:false,
        isPage:true,
        excelBtn:true,//是否展示Excel按钮
        excelUrl:'/api/CostOfTheDead/delivery_details-export-excel',//Excel的下载Url
        excelName:"司机明细_",//excel的文件名
        height:580,//是否设置高度（超出会显示滚动条）
        isIndex:true,//是否需要索引项
        //表格项配置
        items:[
          {
            key:'businessCode',
            label:'业务编码',
            align:'center',
          },
          {
            key:'arrivedTime',
            label:'到馆时间',
            align:'center',
          },
          {
            key:'deadName',
            label:'逝者姓名',
            align:'center',
          },
          {
            key:'deadGender',
            label:'性别',
            align:'center',
            // dicVal:'sex'
          },
          {
            key:'householdRegistrationPlace',
            label:'户籍地址',
            align:'center',
          },
          {
            key:'deathDate',
            label:'死亡时间',
            align:'center',
          },
          {
            key:'agentName',
            label:'家属/承办人姓名',
            align:'center',
          },
          {
            key:'mobilePhone',
            label:'联系电话',
            align:'center',
          },
          {
            key:'driverUserName',
            label:'接运司机',
            align:'center',
          },
          {
            key:'transportPlace',
            label:'接尸地点',
            align:'center',
          }
        ]
      },
      //分页数据
      page:{
        pageSize: 20,//默认页码大小
        total: 0,//总数
        currentPage: 1//当前页
      },
    }
  },
  watch:{
    'query.asOutsideDriver':function(n){
      this.searchOptions.items[2].dicData=[]
      driverType({asOutsideDriver:n}).then(res=>{
        let tmpArr=res.data
        tmpArr.map(el=>{
          this.searchOptions.items[2].dicData.push({desc:el.fullName,val:el.fullName})
        })
      })
    },
  },
  methods:{
    //获取参数
    getQuery(query){
      this.query=query
    },
    //页面加载事件
    onLoad({page,query}){
      let params={
        ...page,
        ...query
      }
      deliveryDetails(params).then(res=>{
        this.data=res.data.list
        this.page=res.data.pager
      })
    },
    // 分页组件事件开始
    // 当前页改变事件
    handleCurrentChange({currentPage}){
      this.page.currentPage=currentPage
    },
    //每页展示数量改变触发
    handleSizeChange({pageSize}) {
      this.page.pageSize=pageSize
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
